.app-steps {
  .steps-items {
    position: relative;
    display: flex;
    padding-bottom: 0.4rem;
    margin: 0 0 0.2rem;
  }
  .step-item {
    position: relative;
    flex: 1;
    font-size: 0.28rem;
    color: $steps-item-color;
  }
  .step-item--finish {
    color: $steps-item-finish-color;
  }
  .step-item--active {
    color: $steps-item-active-color;
  }
  .step-item__title {
    display: inline-block;
    margin-left: 0.06rem;
    font-size: 0.34rem;
    transform: translateX(-50%);
  }
  .step-item__subtitle {
    font-size: 0.24rem;
  }
  .step-item:first-child .step-item__title {
    margin-left: 0;
    transform: none;
  }
  .step-item:last-child {
    position: absolute;
    right: 0.02rem;
    width: auto;
    .step-item__title {
      margin-left: 0;
      transform: none;
    }
    .step-item__container {
      right: -0.18rem;
      left: auto;
    }
    .step-item__line {
      width: 0;
    }
  }
  .step-item__container {
    position: absolute;
    top: 0.6rem;
    left: -0.16rem;
    z-index: 1;
    padding: 0 0.16rem;
    background-color: $steps-item-container-background-color;
    transform: translateY(-50%);
  }
  .has-subtitle {
    .step-item__container,
    .step-item__line {
      top: 1rem;
    }
  }
  .step-item__circle {
    display: block;
    width: 0.1rem;
    height: 0.1rem;
    background-color: $steos-item-circle-color;
    border-radius: 50%;
  }
  .step-item__circle--active {
    position: relative;
    display: block;
    width: 0.24rem;
    height: 0.24rem;
    font-size: 0.24rem;
    border-radius: 50%;
    &::before {
      position: absolute;
      top: 0.04rem;
      left: 0.04rem;
      width: 0.14rem;
      height: 0.08rem;
      content: '';
      border-bottom: 0.02rem solid $steps-item-container-background-color;
      border-left: 0.02rem solid $steps-item-container-background-color;
      transform: rotate(-45deg);
    }
  }
  .step-item__line {
    position: absolute;
    top: 0.6rem;
    left: 0;
    width: 100%;
    height: 0.02rem;
    background-color: $steps-item-line-color;
  }
  .step-item--finish .step-item__circle,
  .step-item__circle--active,
  .step-item--finish .step-item__line {
    background-color: $steps-item-finish-background-color;
  }
}
